<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/top10.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="logo">
            <a href="#">
                <img src="./images/header_logo.png" alt="">
            </a>
        </div>
        <div class="app-down">
            <a href="#">
                <img src="./images/header_app.png" alt="">
            </a>
        </div>
    </header>
    <!-- 搜索栏 -->
    <div class="search">
        <input type="search" placeholder="请输入你想比价的商品">
        <div class="searchBtn">搜索</div>
    </div>
    <!-- 品牌标题对应的十大品牌 -->
    <nav>
        <nav>
            <div class="title">
                <a href="#">首页></a>
                <a href="#">品牌大全</a>
                <a href="#" style="color:#000;" class="titleName"></a>
            </div>
            <!-- 1-10排序 -->
            <div class="content">
                <div class="paihang">
                    热门品牌排行
                </div>
                <div class="pp-content">

                </div>
            </div>
            <!-- 销售排行 -->
            <div class="content">
                <div class="paihang tv_title">
                </div>
                <div class="tv">
                    <ul></ul>
                </div>
            </div>
            <!-- 评论 -->
            <div class="content">
                <div class="paihang comment">
                </div>
                <div class="comment_view">
                    <ul>

                    </ul>
                </div>
            </div>
        </nav>
    </nav>
    <div class="haowu">
    </div>
    <!-- 底部 -->
    <footer>
        <div class="foot-top">
            <a href="#">登录</a>
            <a href="#">注册</a>
            <a href="#">
                <img src="./images/top.jpg" alt=""> 返回顶部
            </a>
        </div>
        <div class="copy">
            <p>
                <a href="#">手机APP下载</a>
                <a href="#">慢慢买手机版</a>
                -- 掌上比价平台
            </p>
            <p>m.manmanbuy.com</p>
        </div>
    </footer>
</body>
<script src="./lib/zepto.js"></script>
<script src="./lib/template-web.js"></script>
<script type="aa/cc" id="getbrand">
    {{each data value index}}
    <a href="">
        <span class="top1">{{index+1}}</span>
        <div class="info">
            <p class="info-title">{{value.brandName}}</p>
            <p>{{value.brandInfo}}</p>
        </div>
    </a>
    {{/each}}
</script>
<script type="tv/img" id="tv">
    {{each data value}}

    <li data-productid="{{value.productId}}">
        <a href="#">
            <div class="tv_img">
                {{@value.productImg}}
            </div>
            <div class="tv_content">
                <p>{{value.productName}}</p>
                <div class="price">
                    <span>{{value.productPrice}}</span>
                    <em></em>
                </div>
                <div class="pinlun">
                    <span>{{value.productQuote}}</span>
                    <span>{{value.productCom}}</span>
                </div>
            </div>
        </a>
    </li>

    {{/each}}
</script>
<script type="comment/tmp" id="comment">
    {{each data value}}
    <li>
        <div class="comment_title">
            <img alt="">
            <span></span>
        </div>
        <div class="comment_bb">
            <div class="strat">
                {{value.comName}}
                <span class="strat_img"></span>
                <span class="date">{{value.comTime}}</span>
            </div>
            <div class="bb_pl">
                {{value.comContent}}
            </div>
        </div>

    </li>
    {{/each}}
</script>
<script>
    var oldurl = location.href;
    var brandtitleid = oldurl.split('?')[1];
    var name = decodeURI(brandtitleid.split('&')[1]);
    var titleName = name.substring(0, 4);
    // console.log(name);
    // console.log(titleName);
    var url = 'http://193.112.55.79:9090/api/getbrand?' + brandtitleid;
    var tvurl = 'http://193.112.55.79:9090/api/getbrandproductlist?' + brandtitleid;
    $('.titleName').html('>' + titleName + '哪个牌子好');
    $('.paihang').html(titleName + '哪个牌子好');
    $('.tv_title ').html(titleName + '产品销量排行');
    $('.comment').html(titleName + '最新评论');
    $('.haowu').html(titleName + '好物榜单');
    $.ajax({
        type: 'get',
        url: url,
        dataType: 'json',
        success: function (res) {
            var result = res.result;
            for (var j = 0; j < result.length; j++) {
                for (var i = 0; i < result.length - j-1; i++) {
                    var num1=parseInt(result[i].brandInfo.substring(8));
                    var num2=parseInt(result[i+1].brandInfo.substring(8));
                    if (num1<num2) {
                        var temp = result[i];
                        result[i] = result[i + 1];
                        result[i + 1] = temp;
                    }
                }
            }
            var getbrandHtml = template('getbrand', {
                'data': result
            });
            $('.pp-content').html(getbrandHtml);
        }
    });
    //tv
    $.ajax({
        type: 'get',
        url: tvurl,
        dataType: 'json',
        success: function (res) {
            var tvimgHtml = template('tv', {
                'data': res.result
            })
            // console.log(tvimgHtml);
            $('.tv ul').html(tvimgHtml);
            var productid = $('.tv ul li').eq(0).attr("data-productid");
            var tv_img = $('.tv ul li a img').eq(0).attr("src");
            var tv_content = $('.tv_content>p').html();
            // console.log(productid);
            // console.log(tv_img);
            var commentUrl = 'http://193.112.55.79:9090/api/getproductcom?productid=' + productid;
            $.ajax({
                type: 'get',
                url: commentUrl,
                dataType: 'json',
                success: function (res) {
                    var commentHtml = template('comment', {
                        data: res.result
                    });
                    //    console.log(commentHtml);
                    $('.comment_view ul').html(commentHtml);
                    $('.comment_title img').attr('src', tv_img);
                    $('.comment_title span').html(tv_content);
                }
            });
        }
    });
</script>

</html>